<template>
  <el-row style="background-color: skyblue">
    <el-col :span="6" :xs="24" style="background: salmon">
      <el-row>
        <el-col :span="24" :xs="24">
          <strong>闲事随心管理后台</strong>
          <el-divider></el-divider>
        </el-col>
        <el-col :span="24" :xs="24">
          <el-row>
            <el-col :span="24" :xs="24">
              <span>
                <i class="el-icon-s-home">首页</i>
              </span>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24" :xs="24">
          <el-collapse name="a" style="background: salmon">
            <el-collapse-item name="a" title="用户账号管理">
              <p style="background: skyblue">
                <router-link to="/center/">
                  <i class="el-icon-user"></i> 账号
                </router-link>
              </p>
              <p style="background: skyblue">
                <el-link>
                  <i class="el-icon-document"></i> 个人信息
                </el-link>
              </p>
            </el-collapse-item>
            <el-collapse-item name="b" title="手机账号管理">
              <p style="background: skyblue">
                <!-- <router-link to="/center/phone"
                  ><i class="el-icon-user"></i>手机号</router-link
                >-->
              </p>
              <p style="background: skyblue">
                <el-link>
                  <i class="el-icon-document"></i> 个人信息
                </el-link>
              </p>
            </el-collapse-item>
            <el-collapse-item name="c" title="商品管理">
              <!-- <p style="background: skyblue">
                <router-link to="/center/shopa"
                  ><i class="el-icon-user"></i>商品信息</router-link
                >
              </p>-->
              <p style="background: skyblue">
                <el-link>
                  <i class="el-icon-document"></i>商品存货
                </el-link>
              </p>
              <p style="background: skyblue">
                <el-link>
                  <i class="el-icon-document"></i>商品出售日志
                </el-link>
              </p>
              <p style="background: skyblue">
                <el-link>
                  <i class="el-icon-document"></i>商品进货
                </el-link>
              </p>
            </el-collapse-item>
            <el-collapse-item name="d" title="图书管理">
              <p style="background: skyblue">
                <!-- <router-link
                  ><i class="el-icon-user"></i>图书信息</router-link
                >-->
              </p>
              <p style="background: skyblue">
                <el-link>
                  <i class="el-icon-document"></i>图书数量
                </el-link>
              </p>
              <p style="background: skyblue">
                <el-link>
                  <i class="el-icon-document"></i>图书存货
                </el-link>
              </p>
              <p style="background: skyblue">
                <el-link>
                  <i class="el-icon-document"></i>图书更新
                </el-link>
              </p>
            </el-collapse-item>
            <el-collapse-item name="e" title="电影管理">
              <!-- <p style="background: skyblue">
                <router-link to="/center/video"
                  ><i class="el-icon-user"></i>电影信息</router-link
                >
              </p>-->
              <p style="background: skyblue">
                <el-link>
                  <i class="el-icon-document"></i>上传记录
                </el-link>
              </p>
            </el-collapse-item>
            <el-collapse-item name="f" title="修改密码">
              <!-- <p style="background: skyblue">
                <router-link
                  ><i class="el-icon-user"></i>进入界面</router-link
                >
              </p>-->
            </el-collapse-item>
          </el-collapse>
        </el-col>
      </el-row>
    </el-col>
    <el-col :span="18" :xs="24">
      <el-row>
        <el-row>
          <el-col :span="24" :xs="24" style="border-bottom: 1px solid black">
            <strong>用户列表</strong>
          </el-col>
        </el-row>
        <el-row>
          <el-row>
            <el-col :span="24" :xs="24">
              <el-menu
                :default-active="id"
                class="el-menu-demo"
                mode="horizontal"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b"
                @select="sel"
              >
                <el-menu-item index="1">处理中心</el-menu-item>
                <el-submenu index="2">
                  <template #title>我的工作台</template>
                  <el-menu-item index="2-1">选项1</el-menu-item>
                  <el-menu-item index="2-2">选项2</el-menu-item>
                  <el-menu-item index="2-3">选项3</el-menu-item>
                  <el-submenu index="2.4">
                    <template #title>我的工作台</template>
                    <el-menu-item index="2-5">选项1</el-menu-item>
                    <el-menu-item index="2-6">选项2</el-menu-item>
                    <el-menu-item index="2-7">选项3</el-menu-item>
                  </el-submenu>
                </el-submenu>
                <el-menu-item index="3" disabled>消息中心</el-menu-item>
              </el-menu>
            </el-col>
          </el-row>
        </el-row>
        <el-row>
          <el-col :span="24" :xs="24">
            <el-row>
              <el-col :span="24" :xs="24">
                <el-table :data="table" border>
                  <el-table-column label="账号" prop="id" width="100%"></el-table-column>

                  <el-table-column label="密码" prop="name" width="100%"></el-table-column>

                  <el-table-column label="时间" prop="mibao" width="100%"></el-table-column>
                  <el-table-column label="操作" width="100">
                   
                  </el-table-column>
                </el-table>
              </el-col>
              <el-col :span="24" :xs="24">
                <el-pagination
                  :total="total"
                  :current-page="start"
                  :page-size="page"
                  @current-change="sel"
                  layout="total,prev,pager,next"
                ></el-pagination>
                
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-row>
    </el-col>
    <el-upload
      class="upload-demo"
      drag
      action="http://localhost/tp5/publica/index/api/upload"
      multiple
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>
      <div class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
    <!-- <button @click=""></button> -->
    
    <div id="can" style="width: 500px; height: 500px"></div>
    <div>
      123
      <texta>
        <template #a="data">
          asa {{data}}
        </template>
      </texta>
    </div>
  </el-row>
</template>
<script>
import axios from "axios";
import echarts from "echarts";
import texta from './shouYe/text'
import { defineComponent, onMounted, provide, reactive, toRefs } from "vue";
export default defineComponent({
  setup() {
    let obja = reactive({text:'123'}) 
    // provide 传送响应式数据与函数 inject 子组件接收
    // 从而实现 react 类似的函数式编程 改变 父组件状态
    let textChange = (val)=>{
      obja.text = obja.text + val
    }
    provide('text',obja)
    provide('textChange',textChange)
    onMounted(() => {
      const ech = echarts.init(document.getElementById("can"), "dark");
      ech.setOption({
        title: {
          text: "hello",
        },
        legend: { data: ["招商银行", "浦发银行"] },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          name: "日期",

          nameTextStyle: {
            fontWeight: 600,
            fontSize: 18,
          },
        },
        yAxis: {
          type: "value",
          name: "纵轴名称",
          nameTextStyle: {
            fontWeight: 600,
            fontSize: 18,
          },
        },
        label: { text: "nihao" },
        tooltip: { trigger: "axis" }, // axis   item   none三个值
        series: [
          {
            name: "招商银行",
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
          },
          {
            name: "浦发银行",
            data: [620, 711, 823, 934, 1445, 1456, 1178],
            type: "line",
          },
        ],
      });
    });
    let obj = reactive({
      id: "1",
      list: [
        {
          id: 1,
          user: "流通",
          text: "世界真好",
        },
        {
          id: 2,
          user: "撒网",
          text: "世界真好",
        },
      ],
      total: 150,
      start: 0,
      page: 3,
      d: "",
      table: [{ id: "1", name: "2", mibao: "3" }],
      a:1,
      aa:11
    });
    let methods = {
      file: function () {
        // const form = new FormData();
        // const file = this.$refs.file.files[0];
        // form.append("file", file);
        // const text = {
        //   file: form,
        // };
        // const header = {
        //   headers: {
        //     "Content-Type": "multipart/form-data",
        //   },
        // };
        // axios
        //   .post("publica/index/api/upload", form, header)
        //   .then((res) => {
        //     console.log(res.data);
        //   })
        //   .catch(function (err) {
        //     console.log(err);
        //   });
      },
      sel(value) {
        // this.$store.state.index = value;
        // this.$store.dispatch("page");
      },
      // sel:function(q){
      //   console.log(q)
      // },
      del: function (id) {
        let i = -1;
        let index = null;
        for (let s of this.list) {
          i = i + 1;
          if (s.id == id) {
            // console.log(s);
            this.list.splice(i, 1);
            // this.$message({
            //   message: "删除成功",
            //   type: "info",
            // });
          }
        }
      },
      cel: function () {
        this.$confirm("是否取消", "提示", {
          confirmButton: "确定",
          cancelButton: "取消",
          type: "warning",
        })
          .then(() => {
            this.$message({
              message: "取消成功",
              type: "success",
            });
          })
          .catch(() => {
            this.$message({
              message: "失败",
              type: "success",
            });
          });
      },
    };
    return {
      ...toRefs(obj),
      ...methods,
    };
  },
  mounted() {},
  components: {
    texta
  }
  // const h = this.$http();
  // h.then((res) => {
  //   console.log(res);
  // });
  //   const ech = echarts.init(document.getElementById("can"), "dark");
  //   ech.setOption({
  //     title: {
  //       text: "hello",
  //     },
  //     legend: { data: ["招商银行", "浦发银行"] },
  //     xAxis: {
  //       type: "category",
  //       data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  //       name: "日期",

  //       nameTextStyle: {
  //         fontWeight: 600,
  //         fontSize: 18,
  //       },
  //     },
  //     yAxis: {
  //       type: "value",
  //       name: "纵轴名称",
  //       nameTextStyle: {
  //         fontWeight: 600,
  //         fontSize: 18,
  //       },
  //     },
  //     label: { text: "nihao" },
  //     tooltip: { trigger: "axis" }, // axis   item   none三个值
  //     series: [
  //       {
  //         name: "招商银行",
  //         data: [820, 932, 901, 934, 1290, 1330, 1320],
  //         type: "line",
  //       },
  //       {
  //         name: "浦发银行",
  //         data: [620, 711, 823, 934, 1445, 1456, 1178],
  //         type: "line",
  //       },
  //     ],
  //   });
  // }

  // // computed: {
  // //   table: {
  // //     get: function () {
  // //       return this.$store.state.page;
  // //     },
  // //   },
  // // },
});
</script>